<template>
  <div class="market">
    <Myheader>
      <template #center>\(^o^)/ kiana go shopping \(^o^)/</template>
      <template #os>本小姐要大买特买!</template>
    </Myheader>
    <WhiteSpace :space="20"/>
    <div class="goods-box">
      <div class="nav">
        <div class="nav-list">
          <div class="left">分类</div>
          <div class="right">
            <div class="nav-item" :class="activeCategory === -1 ? 'selected' : ''"
              @click="handleCategoryAll"
            >
              全部
            </div>
            <div class="nav-item" v-for="(item, index) in categoryList" :key="index"
              :class="activeCategory === index ? 'selected' : ''"
              @click="handleCategory(item, index)"
            >
              {{ item }}
            </div>
          </div>        
        </div>
        <div class="nav-list">
          <div class="left">折扣类型</div>
            <div class="right">
              <div class="nav-item"
               :class="activeSale === -1 ? 'selected' : ''"
               @click="handleSaleAll"
              >
                全部
              </div>
              <div class="nav-item" v-for="(item, index) in saleList" :key="index"
               :class="activeSale === index ? 'selected' : ''"
                @click="handleSale(item, index)"
              >
                {{ item}}
              </div>
          </div>
        </div>       
        <div class="nav-list">
          <div class="left">排序类型</div>
            <div class="right">
            <div class="nav-item" v-for="(item, index) in sortType" :key="index"
             :class="activeSort === index ? 'selected' : ''"
             @click="handleSort(item, index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div> 
        <div class="cart-box">
          <div class="cart" @click="$router.push('/shop/cart')">
            <i class="el-icon-shopping-cart-full"></i>
          </div>
        </div>      
      </div>
      <div class="middle">
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="goodsInfo.current"
            :page-sizes="pageList"
            :page-size="goodsInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="goodsTotal">
          </el-pagination>
        </div>
        <WhiteSpace :space="20"/>
        <div class="search" @keyup.enter="goSearch">
          <el-input
            placeholder="请输入搜索关键词"
            v-model="input"
            clearable
            @blur="handleBlur"
          >
          </el-input>
        </div>
        <WhiteSpace :space="20"/>
        <div class="goods-list">
          <div class="goods-item"
            v-for="(item, index) in goodsList" :key="index"
            @click="goDetail(item.goods_id)"
          >
            <div class="pic">
              <img :src="item.img_big_logo" alt="">
            </div>
            <div class="title">
              {{ item.title }}
            </div>
            <div class="price">
              <div class="current-price">{{ item.current_price }}</div>
              <div class="pre">{{ item.price }}</div>
            </div>
            <div class="btns">
              <div @click.stop.prevent="handleAddCart(item.goods_id)">加入购物车</div>
              <div>立即购买</div>
            </div>
          </div>
        </div>
      </div>
      <div class="go-top">
        <go-top/>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsList, getCategory, addCart } from '@/service/shop'
import { mapState } from 'vuex';
import GoTop from '@/components/GoTop.vue';

export default {
  components: { GoTop },
  data() {
    return {
      goodsList: [],
      categoryList: [],
      pageList: [8, 12, 16, 20],
      goodsInfo: {
        current: 1,
        pagesize: 12,
        search: '',
        filter: '',
        saleType: 10,
        sortType: 'id',
        sortMethod: 'ASC',
        category: '',
      },
      goodsTotal: 0,
      sortType: [
        { type: 'id', method: 'ASC', name: '综合升序' },
        { type: 'id', method: 'DESC', name: '综合降序' },
        { type: 'sale', method: 'ASC', name: '销量升序' },
        { type: 'sale', method: 'DESC', name: '销量降序' },
        { type: 'price', method: 'ASC', name: '价格升序' },
        { type: 'price', method: 'DESC', name: '价格降序' },
      ],
      saleList: [5, 6, 7, 8, 9],
      activeCategory: -1,
      activeSale: -1,
      activeSort: 0,
      input: '',
    };
  },
  computed: {
    ...mapState('user', ['userInfo']),
  },
  methods: {
    goDetail(id) {
      console.log(id)
      if (!id) return;
      this.$router.push(`/shop/market/${ id }`);
    },
    handleBlur() {
      this.goSearch();
    },
    goSearch() {
      console.log(this.input);
      this.goodsInfo.search = this.input;
      this.goodsInfo.current = 1;
      this.getGoodsListData();
    },
    handleSizeChange(val) {
      this.goodsInfo.pagesize = val;
      this.getGoodsListData();
    },
    handleCurrentChange(val) {
      this.goodsInfo.current = val;
      this.getGoodsListData();
    },
    handleCategory(item, idx) {
      this.goodsInfo.category = item;
      this.activeCategory = idx;
      this.goodsInfo.current = 1;
      this.getGoodsListData();
    },
    handleCategoryAll() {
      this.goodsInfo.category = '';
      this.goodsInfo.current = 1;
      this.activeCategory = -1;
      this.getGoodsListData();
    },
    handleSale(item, idx) {
      this.goodsInfo.saleType = item;
      this.goodsInfo.current = 1;
      this.activeSale = idx;
      this.getGoodsListData();
    },
    handleSaleAll() {
      this.goodsInfo.saleType = 10;
      this.goodsInfo.current = 1;
      this.activeSale = -1;
      this.getGoodsListData();
    },
    handleSort(item, idx) {
      this.goodsInfo.sortType = item.type;
      this.goodsInfo.sortMethod = item.method;
      this.goodsInfo.current = 1;
      this.activeSort = idx;
      this.getGoodsListData();
    },
    async getGoodsListData() {
      const res = await getGoodsList(this.goodsInfo);
      console.log(res);
      const { code, list, total } = res || {};
      if (code !== 1) return;
      this.goodsList = list || [];
      this.goodsTotal = total;
    },
    async getCategoryData() {
      const res = await getCategory();    
      const { code, list } = res || {};
      if (code !== 1) return;
      this.categoryList = list || [];
    },
    async handleAddCart(goodsId) {
      const res = await addCart(this.userInfo.id, goodsId);
      console.log(res);
      const { code, message } = res || {};
      if (code !== 1) return;
      this.$message.success({
        message: message,
        duration: 1500,
        showClose: true,
      })
    }
  },
  mounted() {
    this.getGoodsListData();
    this.getCategoryData();
  },
};
</script>

<style lang="scss" scoped>
.market {
  .goods-box {
    display: flex;
    justify-content: space-between;
    .nav {
      width: 15vw;
      border: 1px solid pink;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      height: 60vh;
      // position: fixed;
      left: 10px;
      top: 100px;
      margin-left: 30px;
      .cart-box {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 50px;
        .cart {
          cursor: pointer;
          i {
            color: #ccc;
            font-size: 70px;
            &:hover {
              transform: scale(1.2);
              color: #333;
            }
          }
        }
      }
      .selected {
        color: plum;
      }
      .nav-list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .left {
          width:5vw;
          color: slateblue;
        }
        .right {
          width: 10vw;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          font-size: 14px;
         
          .nav-item {
            width: 4vw;
            height: 1.5vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            cursor: pointer;
            &:hover {
              color: plum;
            }
          }
        }
      }
    }
    .middle {
      // margin-left: 220px;
      .goods-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        // justify-content: space-between;
        width: 780px;
        .goods-item {
          width: 170px;
          height: 280px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-bottom: 20px;
          margin-right: 20px;
          border: 1px solid #ccc;
          padding-bottom: 10px;
          box-sizing: border-box;
          border-radius: 10px;

          &:hover {
            transform: scale(1.1);
            border: 1px solid lightskyblue;
            box-shadow: 0 2px 2px 2px #ccc;
          }
          transition: all .3s;
          .pic {
            width: 170px;
            img {
              display: block;
              width: 100%;
              box-sizing: border-box;
              border-bottom: 1px solid #ccc;
              border-top-right-radius: 10px;
              border-top-left-radius: 10px;
            }
          }
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            padding: 0 5px;
            font-size: 12px;
          }
          .price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            .current-price {
              color: red;
            }
            .pre {
              text-decoration: line-through;
              font-size: 12px;
              color: #ccc;
            }
          }
          .btns {
            display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 5px;
              box-sizing: border-box;
            div {
              width: 43%;
              border: 1px solid gray;
              height: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              border-radius: 10px;
              background-color: rgba(100, 100, 70, .2);
              cursor: pointer;
              &:hover {
                background-color: skyblue;
              }
            }
          }
        }
      }
    }
    .go-top {
      width: 100px;
    }
  }
}
</style>
